<template>
  <div class="songs-list">
    <div>
      <ul class="d-flex flex-wrap jc-start">
      	<li v-for="(item,index) in albumSongs" class="w100 mb-2">
          <span class="text-darkgray mr-2 songindex">{{index+1}}</span>
          <span class="iconfont" @click="getAlbumMusicId(item.id)">&#xe616; {{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  import tools from '@/assets/js/tools.js'
  export default {
    props:{
      albumSongs: Array
    },
    methods: {
      ...mapMutations(['SET_MUSIC_URL','SET_MUSIC_NAME','SET_MUSIC_LYRIC','SET_MUSIC_TIME']),
      async getAlbumMusicId(id) {
        const {data: result} = await this.$http.get('/lyric?id='+id)
        let lyricRes = tools.handleLyric(result.lrc.lyric)
        this.SET_MUSIC_LYRIC(lyricRes.lyricArr)
        this.SET_MUSIC_TIME(lyricRes.timeArr)
        const {data: res} = await this.$http.get('/song/url?id='+id)
        const {data: resu} = await this.$http.get('/song/detail?ids='+id)
        this.SET_MUSIC_URL(res.data[0].url)
        this.SET_MUSIC_NAME(resu.songs[0].name)
      }
    }
  }
</script>

<style scoped>
  .songindex{
  	width: 1rem;
  	display: inline-block;
  }
</style>
